<template>
  			<section class="main">
				<input id="toggle-all" class="toggle-all" type="checkbox"
        :checked='isAllChecked' 
        @click="allChecked">
				<label for="toggle-all">Mark all as complete</label>
				<ul class="todo-list">
					<!-- These are here just to show the structure of the list items -->
					<!-- List items should get the class `editing` when editing and `completed` when marked as completed -->
					<li :class="{completed:item.isDone===true}" 
          v-for="(item,index) in arr" :key="item.id">
						<div class="view">
							<input class="toggle" type="checkbox" v-model="item.isDone" >
								<label>{{item.name}}</label>
							<button class="destroy" @click="del(index)"></button>
						</div>
					</li>
				</ul>
			</section>
</template>

<script>
export default {
    props:['arr'],
    methods:{
      del(index){
        this.$emit('delFn',index)
      },
      allChecked(e){
        this.arr.forEach(item=>{return item.isDone=e.target.checked})
      }
    },
    computed:{
      isAllChecked(){
        return this.arr.every(item=>{return item.isDone===true})
      },
    }
}
</script>

<style>

</style>